import React, { Component } from 'react';
import PopularPage from '../page/PopularPage';
import TrendingPage from '../page/TrendingPage';
import FavoritePage from '../page/FavoritePage';
import MyPage from '../page/MyPage';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';
import { connect } from 'react-redux';
import EventBus from 'react-native-event-bus';
import EventTypes from '../util/EventTypes';

// 配置页面的路由
const TABS = {
    PopularPage: {
        screen: PopularPage,
        navigationOptions: {
            tabBarLabel: '最热',
            tabBarIcon: ({ tintColor, focused }) => (
                <MaterialIcons
                    name={'whatshot'}
                    size={26}
                    style={{ color: tintColor }}>
                </MaterialIcons>
            ),
        },
    },
    TrendingPage: {
        screen: TrendingPage,
        navigationOptions: {
            tabBarLabel: '趋势',
            tabBarIcon: ({ tintColor, focused }) => (
                <MaterialIcons
                    name={'whatshot'}
                    size={26}
                    style={{ color: tintColor }}>
                </MaterialIcons>
            ),
        },
    },
    FavoritePage: {
        screen: FavoritePage,
        navigationOptions: {
            tabBarLabel: '收藏',
            tabBarIcon: ({ tintColor, focused }) => (
                <MaterialIcons
                    name={'favorite'}
                    size={26}
                    style={{ color: tintColor }}>
                </MaterialIcons>
            ),
        },
    },
    MyPage: {
        screen: MyPage,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({ tintColor, focused }) => (
                <MaterialIcons
                    name={'favorite'}
                    size={26}
                    style={{ color: tintColor }}>
                </MaterialIcons>
            ),
        },
    },
};

class DynamicTabNavigator extends Component {
    constructor(props) {
        super(props);
        console.disableYellowBox = true; // 关闭黄色警告
    }

    _tabNavigator() {
        // 判断之前是否存在Tabs，如果存在就不需要重复创建底部导航器
        if (this.Tabs) {
            return this.Tabs;
        }
        const { PopularPage, TrendingPage, FavoritePage, MyPage } = TABS;
        const tabs = { PopularPage, TrendingPage, FavoritePage, MyPage };
        PopularPage.navigationOptions.tabBarLabel = '123'; // 动态修改Tab的属性
        return this.Tabs = createAppContainer(createBottomTabNavigator(
            tabs, {
            tabBarComponent: props => {
                return <TabBarComponent theme={this.props.theme}{...props} />
            }
        }
        ));
    }

    render() {
        const Tab = this._tabNavigator()
        return <Tab
            onNavigationStateChange={(prevState, newState, action) => {
                EventBus.getInstance().fireEvent(EventTypes.bottom_tab_select, {//发送底部tab切换的事件
                    from: prevState.index,
                    to: newState.index
                })
            }}
        />;
    }
}

// 动态切换底部导航器的样式
class TabBarComponent extends Component {

    render() {
        return <BottomTabBar
            {...this.props}
            activeTintColor={this.props.theme.themeColor}
        />
    }
}

const mapStateToProps = state => ({
    theme: state.theme.theme,
});

// 完成组件和状态的连接
export default connect(mapStateToProps)(DynamicTabNavigator);